@extends('layouts.app')

@section('title', 'Edit Branch')

@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3 class="fw-bold mb-0">Edit Branch</h3>
        <small class="text-muted">
            Update branch information and manage blocks
        </small>
    </div>
    <a href="{{ route('setup.branches.index') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left"></i> Back to Branches
    </a>
</div>

<div class="card">
    <div class="card-body">
        @can('setup.branches.edit')<form method="POST" action="{{ route('setup.branches.update', $branch->id) }}" id="branchForm">
            @csrf
            @method('PUT')

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Branch Name <span class="text-danger">*</span></label>
                    <input type="text" 
                           name="branch_name"
                           class="form-control @error('branch_name') is-invalid @enderror"
                           value="{{ old('branch_name', $branch->branch_name) }}"
                           required>
                    @error('branch_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Branch Type <span class="text-danger">*</span></label>
                    <select name="branch_type" class="form-select @error('branch_type') is-invalid @enderror" required>
                        <option value="LOCAL" {{ old('branch_type', $branch->branch_type) == 'LOCAL' ? 'selected' : '' }}>Local Branch</option>
                        <option value="EMBASSY" {{ old('branch_type', $branch->branch_type) == 'EMBASSY' ? 'selected' : '' }}>Embassy Branch</option>
                    </select>
                    @error('branch_type')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Country</label>
                    <input type="text" 
                           name="country"
                           class="form-control @error('country') is-invalid @enderror"
                           value="{{ old('country', $branch->country) }}">
                    @error('country')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">City</label>
                    <input type="text" 
                           name="city"
                           class="form-control @error('city') is-invalid @enderror"
                           value="{{ old('city', $branch->city) }}">
                    @error('city')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-2 mb-3">
                    <label class="form-label">Station code</label>
                    <input type="text" name="initial" maxlength="10" class="form-control text-uppercase" value="{{ old('initial', $branch->initial) }}" placeholder="e.g. KBU">
                    <div class="form-text">Starts every reference number.</div>
                </div>
                <div class="col-md-2 mb-3">
                    <label class="form-label">County</label>
                    <input type="text" name="county" class="form-control" value="{{ old('county', $branch->county) }}">
                </div>
                <div class="col-md-2 mb-3">
                    <label class="form-label">Region</label>
                    <input type="text" name="region" class="form-control" value="{{ old('region', $branch->region) }}">
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Contact Person</label>
                    <input type="text" 
                           name="contact_person"
                           class="form-control @error('contact_person') is-invalid @enderror"
                           value="{{ old('contact_person', $branch->contact_person) }}">
                    @error('contact_person')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Phone</label>
                    <input type="text" 
                           name="phone"
                           class="form-control @error('phone') is-invalid @enderror"
                           value="{{ old('phone', $branch->phone) }}">
                    @error('phone')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" 
                           name="email"
                           class="form-control @error('email') is-invalid @enderror"
                           value="{{ old('email', $branch->email) }}">
                    @error('email')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select">
                        <option value="1" {{ old('status', $branch->status) == 1 ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ old('status', $branch->status) == 0 ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>

                <div class="col-md-12 mb-3">
                    <label class="form-label">Address</label>
                    <textarea name="address"
                              rows="3"
                              class="form-control @error('address') is-invalid @enderror">{{ old('address', $branch->address) }}</textarea>
                    @error('address')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <hr>

            <h6 class="fw-bold mb-3">
                <i class="fas fa-th-large me-2"></i>
                Branch Blocks / Sections
            </h6>

            <div id="blocks-wrapper">
                @foreach($blocks as $index => $block)
                <div class="row block-item mb-3" data-block-id="{{ $block->id }}">
                    <div class="col-md-4">
                        <input type="text"
                               name="blocks[{{ $index }}][block_name]"
                               class="form-control"
                               value="{{ $block->block_name }}"
                               placeholder="e.g Block A">
                    </div>
                    <div class="col-md-3">
                        <select name="blocks[{{ $index }}][block_type]" class="form-select">
                            <option value="BLOCK" {{ $block->block_type == 'BLOCK' ? 'selected' : '' }}>Block</option>
                            <option value="SECTION" {{ $block->block_type == 'SECTION' ? 'selected' : '' }}>Section</option>
                            <option value="WING" {{ $block->block_type == 'WING' ? 'selected' : '' }}>Wing</option>
                            <option value="UNIT" {{ $block->block_type == 'UNIT' ? 'selected' : '' }}>Unit</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input type="number"
                               name="blocks[{{ $index }}][capacity]"
                               class="form-control"
                               value="{{ $block->capacity }}"
                               placeholder="Capacity">
                    </div>
                    <div class="col-md-1">
                        <select name="blocks[{{ $index }}][status]" class="form-select">
                            <option value="1" {{ $block->status == 1 ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ $block->status == 0 ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>
                    <div class="col-md-1">
                        <input type="hidden" name="blocks[{{ $index }}][id]" value="{{ $block->id }}">
                        <button type="button" class="btn btn-danger remove-block">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                @endforeach
            </div>

            <button type="button" class="btn btn-outline-primary btn-sm" id="add-block-btn">
                <i class="fas fa-plus"></i> Add Block
            </button>

            <div class="mt-4">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Update Branch
                </button>
                <a href="{{ route('setup.branches.index') }}" class="btn btn-secondary">
                    <i class="fas fa-times"></i> Cancel
                </a>
            </div>
        </form>@endcan
    </div>
</div>

@endsection

@push('scripts')
<script>
let blockIndex = {{ count($blocks) }};

$('#add-block-btn').click(function () {
    let html = `
    <div class="row block-item mb-3">
        <div class="col-md-4">
            <input type="text"
                   name="blocks[${blockIndex}][block_name]"
                   class="form-control"
                   placeholder="e.g Block A">
        </div>
        <div class="col-md-3">
            <select name="blocks[${blockIndex}][block_type]" class="form-select">
                <option value="BLOCK">Block</option>
                <option value="SECTION">Section</option>
                <option value="WING">Wing</option>
                <option value="UNIT">Unit</option>
            </select>
        </div>
        <div class="col-md-3">
            <input type="number"
                   name="blocks[${blockIndex}][capacity]"
                   class="form-control"
                   placeholder="Capacity">
        </div>
        <div class="col-md-1">
            <select name="blocks[${blockIndex}][status]" class="form-select">
                <option value="1">Active</option>
                <option value="0">Inactive</option>
            </select>
        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-danger remove-block">
                <i class="fas fa-trash"></i>
            </button>
        </div>
    </div>
    `;
    
    $('#blocks-wrapper').append(html);
    blockIndex++;
});

$(document).on('click', '.remove-block', function () {
    if (confirm('Are you sure you want to remove this block?')) {
        $(this).closest('.block-item').remove();
    }
});
</script>
@endpush