@extends('layouts.admin')

@section('title', 'Kelola Cabang')

@section('content')
<style>
    .page-header-custom {
        background: linear-gradient(90deg, #0066cc 0%, #3399ff 100%);
        color: white;
        border-radius: 18px;
        padding: 28px 30px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
        margin-bottom: 24px;
    }
    .page-header-custom h1 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 6px;
    }
    .page-header-custom p {
        color: rgba(255,255,255,0.88);
        margin-bottom: 0;
    }
    .card-custom {
        border-radius: 18px;
        border: none;
        box-shadow: 0 18px 35px rgba(24, 72, 138, 0.08);
    }
    .table thead th {
        border-bottom: 0;
        background: #f5f8ff;
        color: #34495e;
        font-weight: 700;
    }
    .table tbody tr:hover {
        background: rgba(51, 153, 255, 0.07);
    }
    .btn-header {
        padding: 0.6rem 1.2rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
    }
</style>

<div class="container-fluid px-4">
    <div class="page-header-custom">
        <div class="d-flex justify-content-between align-items-start flex-column flex-md-row">
            <div>
                <h1><i class="fas fa-store mr-3"></i> Kelola Cabang</h1>
                <p>Tambahkan atau hapus cabang yang tersedia untuk sistem.</p>
            </div>
            <button class="btn btn-light btn-header" data-toggle="modal" data-target="#branchModal"><i class="fas fa-plus mr-2"></i>Tambah Cabang</button>
        </div>
    </div>

    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif

    <div class="card card-custom">
        <div class="card-body p-4">
            <div class="table-responsive">
                <table class="table table-hover table-borderless align-middle mb-0">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Nama Cabang</th>
                            <th class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($branches as $branch)
                        <tr>
                            <td>{{ $branch->id }}</td>
                            <td>{{ $branch->name }}</td>
                            <td class="text-center">
                                <form action="/branches/{{ $branch->id }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Hapus cabang ini?')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="branchModal" tabindex="-1" aria-labelledby="branchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-20 border-0 shadow-lg">
            <div class="modal-header bg-primary text-white border-0">
                <h5 class="modal-title" id="branchModalLabel">Tambah Cabang</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="/branches" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Nama Cabang</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light btn-header" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-header">Simpan Cabang</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection