@extends('layouts.app')

@section('title', 'Branches Setup')

@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3 class="fw-bold mb-0">Branches Setup</h3>
        <small class="text-muted">
            Manage local prison branches and embassy detention branches
        </small>
    </div>

    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addBranchModal">
        <i class="fas fa-plus"></i> Add Branch
    </button>
</div>

<div class="card">
    <div class="card-body">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="table-responsive">
            <table class="table table-bordered table-hover align-middle">
                <thead class="table-dark">
                    <tr>
                        <th>#</th>
                        <th>Branch Name</th>
                        <th>Type</th>
                        <th>Country</th>
                        <th>City</th>
                        <th>Contact Person</th>
                        <th>Phone</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($branches as $key => $branch)
                        <tr>
                            <td>{{ $key + 1 }}</td>
                            <td>{{ $branch->branch_name }}</td>
                            <td>
                                @if($branch->branch_type == 'LOCAL')
                                    <span class="badge bg-success">Local</span>
                                @else
                                    <span class="badge bg-primary">Embassy</span>
                                @endif
                            </td>
                            <td>{{ $branch->country ?? '-' }}</td>
                            <td>{{ $branch->city ?? '-' }}</td>
                            <td>{{ $branch->contact_person ?? '-' }}</td>
                            <td>{{ $branch->phone ?? '-' }}</td>
                            <td>
                                @if($branch->status == 1)
                                    <span class="badge bg-success">Active</span>
                                @else
                                    <span class="badge bg-danger">Inactive</span>
                                @endif
                            </td>
                            <td>
                                @can('setup.branches.edit')<a href="{{ route('setup.branches.edit', $branch->id) }}" 
                                   class="btn btn-sm btn-warning">
                                    <i class="fas fa-edit"></i> Edit
                                </a>@endcan
                                
                                <button type="button" 
                                        class="btn btn-sm btn-info"
                                        onclick="viewBlocks({{ $branch->id }}, '{{ $branch->branch_name }}')">
                                    <i class="fas fa-th-large"></i> Blocks
                                </button>
                                
                                <form action="{{ route('setup.branches.toggle-status', $branch->id) }}" 
                                      method="POST" 
                                      style="display: inline-block;">
                                    @csrf
                                    <button type="submit" 
                                            class="btn btn-sm {{ $branch->status == 1 ? 'btn-secondary' : 'btn-success' }}">
                                        <i class="fas {{ $branch->status == 1 ? 'fa-ban' : 'fa-check' }}"></i>
                                        {{ $branch->status == 1 ? 'Deactivate' : 'Activate' }}
                                    </button>
                                </form>
                                
                                <form action="{{ route('setup.branches.destroy', $branch->id) }}" 
                                      method="POST" 
                                      style="display: inline-block;"
                                      onsubmit="return confirm('Are you sure you want to delete this branch? All associated blocks will also be deleted.');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger">
                                        <i class="fas fa-trash"></i> Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center text-muted">
                                No branches added yet
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Branch Modal -->
<div class="modal fade" id="addBranchModal" tabindex="-1" aria-labelledby="addBranchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        @can('setup.branches.add')<form method="POST" action="{{ route('setup.branches.store') }}" id="addBranchForm">
            @csrf
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="addBranchModalLabel">
                        <i class="fas fa-plus-circle me-2"></i> Add New Branch
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <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"
                                   required>
                        </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" required>
                                <option value="">Select Type</option>
                                <option value="LOCAL">Local Branch</option>
                                <option value="EMBASSY">Embassy Branch</option>
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">Country</label>
                            <input type="text" 
                                   name="country"
                                   class="form-control">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">City</label>
                            <input type="text" 
                                   name="city"
                                   class="form-control">
                        </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" placeholder="e.g. KBU">
                        </div>
                        <div class="col-md-2 mb-3">
                            <label class="form-label">County</label>
                            <input type="text" name="county" class="form-control">
                        </div>
                        <div class="col-md-2 mb-3">
                            <label class="form-label">Region</label>
                            <input type="text" name="region" class="form-control">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">Contact Person</label>
                            <input type="text" 
                                   name="contact_person"
                                   class="form-control">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">Phone</label>
                            <input type="text" 
                                   name="phone"
                                   class="form-control">
                        </div>

                        <div class="col-md-12 mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" 
                                   name="email"
                                   class="form-control">
                        </div>

                        <div class="col-md-12 mb-3">
                            <label class="form-label">Address</label>
                            <textarea name="address"
                                      rows="3"
                                      class="form-control"></textarea>
                        </div>
                    </div>

                    <hr>

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

                    <div id="blocks-wrapper">
                        <div class="row block-item mb-3">
                            <div class="col-md-5">
                                <input type="text"
                                       name="blocks[0][block_name]"
                                       class="form-control"
                                       placeholder="e.g Block A">
                            </div>
                            <div class="col-md-3">
                                <select name="blocks[0][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[0][capacity]"
                                       class="form-control"
                                       placeholder="Capacity">
                            </div>
                            <div class="col-md-1">
                                <button type="button" class="btn btn-danger remove-block">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </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>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Save Branch
                    </button>
                </div>
            </div>
        </form>@endcan
    </div>
</div>

<!-- View Blocks Modal -->
<div class="modal fade" id="blocksModal" tabindex="-1" aria-labelledby="blocksModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="blocksModalLabel">
                    <i class="fas fa-th-large me-2"></i>
                    Branch Blocks - <span id="branchName"></span>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="blocksList">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
let blockIndex = 1;

// Add new block
$('#add-block-btn').click(function () {
    let html = `
    <div class="row block-item mb-3">
        <div class="col-md-5">
            <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">
            <button type="button" class="btn btn-danger remove-block">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
    `;
    
    $('#blocks-wrapper').append(html);
    blockIndex++;
});

// Remove block
$(document).on('click', '.remove-block', function () {
    $(this).closest('.block-item').remove();
});

// Reset form when modal closes
$('#addBranchModal').on('hidden.bs.modal', function () {
    $('#addBranchForm')[0].reset();
    $('#blocks-wrapper').html(`
        <div class="row block-item mb-3">
            <div class="col-md-5">
                <input type="text"
                       name="blocks[0][block_name]"
                       class="form-control"
                       placeholder="e.g Block A">
            </div>
            <div class="col-md-3">
                <select name="blocks[0][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[0][capacity]"
                       class="form-control"
                       placeholder="Capacity">
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-danger remove-block">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    `);
    blockIndex = 1;
});

// View blocks function
function viewBlocks(branchId, branchName) {
    $('#branchName').text(branchName);
    $('#blocksList').html('<div class="text-center"><div class="spinner-border text-primary"></div></div>');
    $('#blocksModal').modal('show');
    
    $.ajax({
        url: '/prisons/public/setup/branches/' + branchId + '/blocks',
        type: 'GET',
        success: function(blocks) {
            if (blocks.length === 0) {
                $('#blocksList').html('<div class="alert alert-info">No blocks/sections added for this branch.</div>');
                return;
            }
            
            let html = '<div class="list-group">';
            blocks.forEach(block => {
                html += `
                    <div class="list-group-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>${block.block_name}</strong>
                                <br>
                                <small class="text-muted">Type: ${block.block_type}</small>
                                ${block.capacity ? `<br><small class="text-muted">Capacity: ${block.capacity}</small>` : ''}
                            </div>
                            <span class="badge bg-success">Active</span>
                        </div>
                    </div>
                `;
            });
            html += '</div>';
            $('#blocksList').html(html);
        },
        error: function(xhr) {
            console.log(xhr);
            $('#blocksList').html('<div class="alert alert-danger">Error loading blocks. Please try again.</div>');
        }
    });
}

// Debug: Check if modal exists when page loads
$(document).ready(function() {
    console.log('Page loaded');
    console.log('Add button exists:', $('[data-bs-target="#addBranchModal"]').length);
    console.log('Modal exists:', $('#addBranchModal').length);
    
    // Test if Bootstrap is loaded
    if (typeof bootstrap !== 'undefined') {
        console.log('Bootstrap loaded');
    } else {
        console.log('Bootstrap not loaded');
    }
});
</script>
@endpush