@extends('layouts.app')

@section('content')
<style>
    .page-wrap {
        max-width: 1300px;
    }

    .header-row {
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:15px;
        gap:10px;
        flex-wrap:wrap;
    }

    .btn {
        padding:10px 14px;
        border:none;
        border-radius:8px;
        cursor:pointer;
        font-weight:600;
        text-decoration:none;
        display:inline-block;
    }

    .btn-primary {
        background:#1E4FA8;
        color:#fff;
    }

    .btn-orange {
        background:#E84C0D;
        color:#fff;
    }

    .btn-danger {
        background:#dc3545;
        color:#fff;
    }

    .card {
        background:#fff;
        border-radius:14px;
        padding:20px;
        margin-bottom:20px;
        box-shadow:0 4px 14px rgba(0,0,0,0.06);
    }

    .search-box {
        padding:10px;
        width:260px;
        border:1px solid #ddd;
        border-radius:8px;
    }

    table {
        width:100%;
        border-collapse:collapse;
    }

    th, td {
        padding:12px 10px;
        border-bottom:1px solid #eee;
        text-align:left;
    }

    th {
        background:#f5f7fb;
    }

    .dropdown {
        position:relative;
        display:inline-block;
    }

    .dropdown-content {
        display:none;
        position:absolute;
        right:0;
        background:#fff;
        min-width:160px;
        box-shadow:0 4px 14px rgba(0,0,0,0.14);
        border-radius:10px;
        overflow:hidden;
        z-index:100;
    }

    .dropdown-content a,
    .dropdown-content button {
        display:block;
        width:100%;
        padding:10px 12px;
        border:none;
        background:#fff;
        text-align:left;
        cursor:pointer;
        text-decoration:none;
        color:#111;
    }

    .dropdown-content a:hover,
    .dropdown-content button:hover {
        background:#f5f7fb;
    }

    .dropdown:hover .dropdown-content {
        display:block;
    }

    .form-popup {
        display:none;
        margin-top:20px;
    }

    .form-grid {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:15px;
    }

    .form-group {
        display:flex;
        flex-direction:column;
    }

    .form-group.full {
        grid-column:1 / -1;
    }

    label {
        font-weight:600;
        margin-bottom:6px;
    }

    input, textarea {
        padding:10px;
        border:1px solid #ddd;
        border-radius:8px;
    }

    @media(max-width:768px){
        .form-grid{
            grid-template-columns:1fr;
        }
    }
</style>

<div class="page-wrap">

    <div class="header-row">
        <h2>Branches</h2>

        <button class="btn btn-primary" data-permission="branches.create" onclick="toggleForm()">
            + Add Branch
        </button>
    </div>

    @if(session('success'))
        <div style="background:#dff6e9;padding:12px;border-radius:8px;margin-bottom:15px;">
            {{ session('success') }}
        </div>
    @endif

    <div class="card">

        <form method="GET" class="auto-filter-form">
            <input
                type="text"
                name="search"
                value="{{ $search }}"
                placeholder="Search branches..."
                class="search-box"
            >

            <button class="btn btn-primary">
                Search
            </button>
        </form>

    </div>

    <div class="card">

        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Code</th>
                    <th>Phone</th>
                    <th>City</th>
                    <th>Country</th>
                    <th>Main</th>
                    <th>Status</th>
                    <th width="90">Action</th>
                </tr>
            </thead>

            <tbody>

            @forelse($branches as $branch)
                <tr>
                    <td>{{ $branch->name }}</td>
                    <td>{{ $branch->code }}</td>
                    <td>{{ $branch->phone }}</td>
                    <td>{{ $branch->city }}</td>
                    <td>{{ $branch->country }}</td>

                    <td>
                        {{ $branch->is_main ? 'Yes' : 'No' }}
                    </td>

                    <td>
                        {{ $branch->is_active ? 'Active' : 'Inactive' }}
                    </td>

                    <td>

                        <div class="dropdown">
                            <button class="btn btn-orange">
                                More
                            </button>

                            <div class="dropdown-content">

                            <a href="{{ url('/branches/'.$branch->id.'/edit') }}">Update</a>

                                <form
                                    method="POST"
                                    action="{{ url('/branches/'.$branch->id) }}"
                                >
                                    @csrf
                                    @method('DELETE')

                                    <button type="submit">
                                        Delete
                                    </button>
                                </form>

                            </div>
                        </div>

                    </td>
                </tr>

            @empty
                <tr>
                    <td colspan="8">
                        No branches found.
                    </td>
                </tr>
            @endforelse

            </tbody>
        </table>

        <br>

        {{ $branches->links('vendor.pagination.jevapos') }}

    </div>

    <div id="branchForm" class="card form-popup">

        <h3>Add Branch</h3>

        <form method="POST" action="{{ url('/branches') }}">
            @csrf

            <div class="form-grid">

                <div class="form-group">
                    <label>Branch Name *</label>
                    <input type="text" name="name" required>
                </div>

                <div class="form-group">
                    <label>Branch Code</label>
                    <input type="text" name="code">
                </div>

                <div class="form-group">
                    <label>Phone</label>
                    <input type="text" name="phone">
                </div>

                <div class="form-group">
                    <label>Email</label>
                    <input type="email" name="email">
                </div>

                <div class="form-group">
                    <label>City</label>
                    <input type="text" name="city">
                </div>

                <div class="form-group">
                    <label>Country</label>
                    <input type="text" name="country">
                </div>

                <div class="form-group full">
                    <label>Address</label>
                    <textarea name="address"></textarea>
                </div>

            </div>

            <br>

            <label>
                <input type="checkbox" name="is_main">
                Main Branch
            </label>

            <br><br>

            <label>
                <input type="checkbox" name="is_active" checked>
                Active
            </label>

            <br><br>

            <button class="btn btn-primary">
                Save Branch
            </button>

        </form>

    </div>

</div>

<script>
function toggleForm()
{
    let form = document.getElementById('branchForm');

    if(form.style.display === 'block'){
        form.style.display = 'none';
    }else{
        form.style.display = 'block';
    }
}
</script>

@endsection