@extends('layouts.master')

@section('css')
    <!-- Internal Data table css -->
    <link href="{{ URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css') }}" rel="stylesheet">
    <link href="{{ URL::asset('assets/plugins/datatable/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/datatable/css/jquery.dataTables.min.css') }}" rel="stylesheet">
    <link href="{{ URL::asset('assets/plugins/datatable/css/responsive.dataTables.min.css') }}" rel="stylesheet">
    <!-- Internal Notify -->
    <link href="{{ URL::asset('assets/plugins/notify/css/notifIt.css') }}" rel="stylesheet" />

    <style>
        /* ==========================================================
           Branches List Modern UI
           ========================================================== */
        body {
            background-color: #f1f5f9;
            font-family: 'Segoe UI', Tahoma, 'Inter', sans-serif;
        }

        /* كروت الصفحة */
        .invoices-main-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
            margin-bottom: 24px;
            overflow: hidden;
        }

        .invoices-main-card .card-header {
            background-color: #ffffff;
            border-bottom: 1px solid #f1f5f9;
            padding: 16px 20px;
            font-size: 15px;
            font-weight: 800;
            color: #0f172a;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* تنسيقات الجدول العصري */
        #example1 {
            border-collapse: separate;
            border-spacing: 0;
            margin-bottom: 0;
            width: 100% !important;
        }

        #example1 thead th {
            background: #1e293b !important;
            color: #f8fafc !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            padding: 12px 10px !important;
            border: none !important;
            white-space: nowrap;
            vertical-align: middle;
            text-align: center;
        }

        #example1 tbody td {
            vertical-align: middle !important;
            padding: 12px 10px !important;
            font-size: 13.5px;
            color: #334155;
            border-bottom: 1px solid #f1f5f9;
            transition: background 0.15s ease;
            text-align: center;
        }

        #example1 tbody tr:hover td {
            background-color: #f8fafc;
        }

        /* زر إضافة فرع بالهيدر */
        .btn-create-branch {
            background: linear-gradient(135deg, #1e293b, #0f172a) !important;
            color: #ffffff !important;
            border: none;
            border-radius: 9px;
            padding: 9px 20px;
            font-weight: 700;
            font-size: 13.5px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
            transition: all 0.2s ease;
            text-decoration: none !important;
        }

        .btn-create-branch:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
            color: #ffffff !important;
        }
    </style>
@endsection

@section('title')
    {{ __('report.allBranches') }}
@stop

@section('page-header')
<div class="main-parent">
    <div class="breadcrumb-header justify-content-between mb-3">
        <div class="my-auto">
            <div class="d-flex align-items-center">
                <div class="bg-primary text-white rounded d-flex align-items-center justify-content-center mr-2" style="width: 38px; height: 38px; border-radius: 10px !important;">
                    <i class="las la-store-alt" style="font-size: 22px;"></i>
                </div>
                <div>
                    <h4 class="content-title mb-0 font-weight-bold" style="color: #0f172a;">{{ __('report.allBranches') }}</h4>
                    <span class="text-muted tx-13 font-weight-bold">دليل فروع المؤسسة ومواقعها الجغرافية</span>
                </div>
            </div>
        </div>

        @can('Create a new branch')
        <div class="d-flex my-xl-auto right-content">
            <a class="btn-create-branch" href="{{ url('/' . ($page = 'addbranch')) }}">
                <i class="fa fa-plus-circle"></i>
                <span>{{ __('users.addbranch') }}</span>
            </a>
        </div>
        @endcan
    </div>
</div>
@endsection

@section('content')

@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show font-weight-bold shadow-sm" style="border-radius: 10px;" role="alert">
        <strong><i class="fa fa-check-circle ml-1"></i> تم بنجاح:</strong> {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

<!-- row opened -->
<div class="row row-sm">
    <div class="col-xl-12">
        <div class="invoices-main-card">

            <div class="card-header">
                <i class="fa fa-list-alt text-primary"></i>
                <span>قائمة الفروع المسجلة بالنظام</span>
            </div>

            <div class="card-body p-3">
                <div class="table-responsive hoverable-table">
                    <table class="table text-md-nowrap text-center our-table table-hover" id="example1" data-page-length='50' width="100%">
                        <thead>
                            <tr>
                                <th style="width: 10%;">#</th>
                                <th style="width: 45%;">{{ __('users.branch_name') }}</th>
                                <th style="width: 45%;">{{ __('users.branch_place') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                                                        @foreach (App\Models\branchs::get() as $user)
                                                                <tr>
                                    <!-- الرقم -->
                                    <td style="font-weight: 700; color: #64748b;">
                                        {{ $i }}
                                    </td>

                                    <!-- اسم الفرع -->
                                    <td style="font-weight: 800; color: #0f172a; font-size: 14px;">
                                        <i class="fa fa-building-o text-primary ml-1"></i> {{ $user->name }}
                                    </td>

                                    <!-- موقع الفرع -->
                                    <td style="font-weight: 600; color: #475569;">
                                        <i class="fa fa-map-marker text-danger ml-1"></i> {{ $user->place ?: '---' }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- /row -->

<!-- Modal حذف المستخدم الاحتياطي -->
<div class="modal fade" id="modaldemo8" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header bg-danger-transparent">
                <h6 class="modal-title font-weight-bold text-danger">
                    <i class="fa fa-exclamation-triangle ml-1"></i> حذف المستخدم
                </h6>
                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('users.destroy', 'test') }}" method="post">
                {{ method_field('delete') }}
                {{ csrf_field() }}
                <div class="modal-body p-4 text-center">
                    <p class="font-weight-bold mb-3" style="font-size: 15px;">هل أنت متأكد من عملية الحذف؟</p>
                    <input type="hidden" name="user_id" id="user_id" value="">
                    <input class="form-control text-center font-weight-bold bg-light" name="username" id="username" type="text" readonly style="border-radius: 8px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-danger px-4 font-weight-bold">تأكيد الحذف</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('js')
<!-- Internal Datatable js -->
<script src="{{ URL::asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/responsive.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.bootstrap4.js') }}"></script>
<script src="{{ URL::asset('assets/js/table-data.js') }}"></script>

<!-- Internal Notify js -->
<script src="{{ URL::asset('assets/plugins/notify/js/notifIt.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/notify/js/notifit-custom.js') }}"></script>
<!-- Internal Modal js -->
<script src="{{ URL::asset('assets/js/modal.js') }}"></script>

<script>
    $('#modaldemo8').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget);
        var user_id = button.data('user_id');
        var username = button.data('username');
        var modal = $(this);
        modal.find('.modal-body #user_id').val(user_id);
        modal.find('.modal-body #username').val(username);
    });

    $(document).ready(function() {
        setTimeout(function() {
            $('.alert').fadeOut(500);
        }, 4000);
    });
</script>
@endsection