@php
    $isAdmin=true;
@endphp

@extends("../dashboard._blank")
@include("../dashboard.Boutique.check_is_user_boutique")

@section("sidebar")
    @include("../dashboard._sidebar")
@endsection

@section("content")
    <style>
        /* Modern Shipping Page - Sharp Edges Design */
        :root {
            --ship-primary: #6d8f1a;
            --ship-primary-dark: #5a7515;
            --ship-danger: #dc2626;
            --ship-warning: #f59e0b;
            --ship-info: #3b82f6;
            --ship-success: #10b981;
            --ship-text: #1f2937;
            --ship-text-muted: #6b7280;
            --ship-border: #e5e7eb;
            --ship-bg: #ffffff;
            --ship-bg-gray: #f9fafb;
        }

        #categorieModal .modal-dialog, #categorieViewModal .modal-dialog { -webkit-transform: translate(0,-50%); -o-transform: translate(0,-50%); transform: translate(0,-50%); top: 50%; margin: 0 auto; }
        .form-control{ width:100%; }
        .btn{ border-radius: 0px; }

        .ship-page-header { background: var(--ship-bg); border-bottom: 1px solid var(--ship-border); padding: 24px 0; margin-bottom: 24px; }
        .ship-page-title { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 700; color: var(--ship-text); margin: 0; }
        .ship-btn { padding: 8px 16px; font-weight: 600; font-size: 9pt; border: 1px solid transparent; transition: all 0.3s ease; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-right: 8px; }
        .ship-btn-primary { background: var(--ship-primary); color: #ffffff; border-color: var(--ship-primary); }
        .ship-btn-primary:hover { background: var(--ship-primary-dark); color: #ffffff; }
        .ship-table-container { background: var(--ship-bg); border: 1px solid var(--ship-border); overflow-x: auto; }
        .ship-table { width: 100%; border-collapse: collapse; }
        .ship-table thead { background: var(--ship-bg-gray); }
        .ship-table thead th { padding: 16px; text-align: left; font-weight: 700; font-size: 9pt; color: var(--ship-text); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--ship-border); white-space: nowrap; }
        .ship-table tbody td { padding: 12px 16px; text-align: left; font-size: 9pt; color: var(--ship-text); border-bottom: 1px solid var(--ship-border); }
        .ship-table tbody tr { transition: background 0.2s ease; }
        .ship-table tbody tr:hover { background: var(--ship-bg-gray); }
        .ship-badge { display: inline-block; padding: 4px 10px; font-size: 8pt; font-weight: 600; }
        .ship-badge-success { background: var(--ship-success); color: #ffffff; }
        .ship-badge-warning { background: var(--ship-warning); color: #ffffff; }
        .ship-action-dropdown { position: relative; display: inline-block; }
        .ship-action-btn { padding: 6px 12px; background: var(--ship-bg-gray); color: var(--ship-text); border: 1px solid var(--ship-border); font-size: 9pt; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.3s ease; white-space: nowrap; }
        .ship-action-btn:hover { background: var(--ship-primary); border-color: var(--ship-primary); color: #ffffff; }
        .ship-action-menu { position: absolute; top: 100%; left: 0; background: var(--ship-bg); border: 1px solid var(--ship-border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); min-width: 180px; z-index: 1000; display: none; margin-top: 4px; }
        .ship-action-dropdown:hover .ship-action-menu { display: block; }
        .ship-action-menu-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 9pt; color: var(--ship-text); text-decoration: none; transition: background 0.2s ease; border-bottom: 1px solid var(--ship-border); white-space: nowrap; }
        .ship-action-menu-item:last-child { border-bottom: none; }
        .ship-action-menu-item:hover { background: var(--ship-bg-gray); }
        .ship-action-menu-item.view:hover { background: rgba(59, 130, 246, 0.1); color: var(--ship-info); }
        .ship-action-menu-item.edit:hover { background: rgba(245, 158, 11, 0.1); color: var(--ship-warning); }
        .ship-action-menu-item.delete:hover { background: rgba(220, 38, 38, 0.1); color: var(--ship-danger); }
    </style>
    <!-- page content -->
    <div class="right_col" role="main">
        <div>
            <div class="clearfix"></div>
            <div class="container">
                <div class="ship-page-header">
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <h1 class="ship-page-title">
                                <i class="fa fa-shipping-fast"></i>
                                <span>Moyens de Livraison</span>
                            </h1>
                        </div>
                        <div class="col-xs-12 col-md-6 text-right" style="padding-top: 8px;">
                            <button data-target="#shippingCreateModal" data-toggle="modal" class="ship-btn ship-btn-primary">
                                <i class="fa fa-plus"></i>
                                <span>Ajouter un nouveau moyen de livraison</span>
                            </button>
                        </div>
                    </div>
                </div>
                <!-- form -->
                <div class="row">
                    <div class="col-sm-12 col-xs-12 col-lg-12">
                        <div class="ship-table-container">
                            <table class="ship-table">
                                <thead>
                                <tr>
                                    <th>Logo</th>
                                    <th>Type</th>
                                    <th>Nom</th>
                                    <th>Pays</th>
                                    <th>Téléphone</th>
                                    <th>Email</th>
                                    <th>Adresse</th>
                                    <th>Status</th>
                                    <th style="text-align: right;">Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                @php $serviceapp=new App\ServiceShipping(); @endphp
                                @foreach($services as $service)
                                <tr>
                                    <td><img src="{{$service->logo}}" alt="" width="40px" height="40px" style="border: 1px solid var(--ship-border)"></td>
                                    <td>{{$service->type}}</td>
                                    <td>{{$service->name}}</td>
                                    <td>
                                    @php
                                       $serv= $serviceapp->country($service->country);
                                    @endphp
                                        @if($serv!=null)
                                            {{$serv->name}}
                                        @endif
                                    </td>
                                    <td>{{$service->tel}}</td>
                                    <td>{{$service->email}}</td>
                                    <td>{{$service->adress}}</td>
                                    <td>
                                        @if($service->status)
                                            <span class="ship-badge ship-badge-success">Actif</span>
                                        @else
                                            <span class="ship-badge ship-badge-warning">Inactif</span>
                                        @endif
                                    </td>
                                    <td style="text-align: right;">
                                        <div class="ship-action-dropdown">
                                            <button class="ship-action-btn">
                                                <span>Actions</span>
                                                <i class="fa fa-chevron-down"></i>
                                            </button>
                                            <div class="ship-action-menu">
                                                <a href="{{route('livraisons.guide',$service->slug)}}" class="ship-action-menu-item view">
                                                    <i class="fa fa-file-pdf"></i>
                                                    <span>Guide tarifaire</span>
                                                </a>
                                                <a href="" class="ship-action-menu-item edit">
                                                    <i class="fa fa-toggle-on"></i>
                                                    <span>Changer le status</span>
                                                </a>
                                                <a href="" class="ship-action-menu-item delete">
                                                    <i class="fa fa-trash"></i>
                                                    <span>Supprimer</span>
                                                </a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="shippingCreateModal" class="modal fade" data-backdrop="static" data-keyboard="false">
        <div class="modal-md modal-dialog">

                <div class="modal-content">
                    <div class="modal-header" style="background: #00ba9d;">
                        <h4 class="modal-title text-left" style="color: #f1f1f1;"><i class="fa fa-shipping-car"></i> Nouveau service de livraison</h4>
                    </div>
                    <div class="modal-body">
                        <div class="card col-md-12 col-lg-12 col-xs-12" id="form-container">
                            <div class="card-body row">
                                <div style="text-align: center;display:none" class="form-loader text-center"><img style="width: 7%;" src="{{asset('images/livraison-loader.gif')}}"></div>
                                <div class="error-container" style="display: none;">
                                </div>
                                   <form class="col-md-12" method="post" action="{{route('livraisons.store')}}" enctype="multipart/form-data">
                                       @csrf
                                        <section id="first_section">
                                            <h2>Informations du service de livraison</h2>
                                            <div class="form-group">
                                                <label for="type">Choisissez le type de service livraison proposé</label>
                                                <select name="type" id="type" class="form-control">
                                                    <option value="locale">Livraison locale</option>
                                                    <option value="internationale">Livraison internationale</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label for="pays_provenance">Pays de localisation</label>
                                                <select id="pays_provenance" data-placeholder="Choisissez le pays"  name="country" class="form-control choosen">
                                                    <option>Choisissez le pays </option>
                                                    @foreach ($pays as $country)
                                                        <option value="{{$country->name}}"> {{$country->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label for="societe_livraison">Nom de la société de livraison</label>
                                                <input name="name" id="societe_livraison" type="text" class="form-control" placeholder="Exp: DHL">
                                            </div>
                                            <div class="form-group">
                                                <label for="logo_societe_livraison">Logo de la société</label>
                                                <input type="file" id="logo_societe_livraison" class="form-control" name="logo">
                                            </div>
                                            <div class="form-group">
                                                <label for="tel">Contact : numéro de téléphone</label>
                                                <input name="tel" id="tel" type="text" class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label for="email">Contact : email</label>
                                                <input name="email" id="email" type="text" class="form-control">
                                            </div>
                                             <div class="form-group">
                                                <label for="email">Adresse de localisation</label>
                                                <input name="adress" id="adress" type="text" class="form-control">
                                            </div>
                                            <br><br>
                                            <div class="form-group pull-right">
                                                <button type="button" class="btn btn-primary show_second_section">suivant</button>
                                                <button type="button" class="btn btn-dark close-form-btn" data-dismiss="modal">Annuler</button>
                                            </div>
                                        </section>
                                       <section id="second_section" style="display: none">
                                           <h2>Plan tarifaire par pays</h2>
                                           <div class="form-group">
                                               <button type="button" class="btn btn-warning btn-sm add_plan">Ajouter un nouveau plan tarifaire par pays</button>
                                           </div>
                                           <div class="planTarifaire">
                                               <div class="section">
                                           <div class="form-group">
                                               <label for="pays_provenance">Pays </label>
                                               <select id="pays_provenance" data-placeholder="Choisissez le pays" multiple name="countries[][]" class="form-control choosen">
                                                   <option>Choisissez le pays </option>
                                                   @foreach ($pays as $country)
                                                       <option value="{{$country->name}}"> {{$country->name}}</option>
                                                   @endforeach
                                               </select>
                                           </div>
                                           <div class="form-group">
                                               <label for="plan_tarifaire">Plan tarifaire <span style="color: red">(pdf *)</span></label>
                                               <input type="file" id="plan_tarifaire" class="form-control" name="filename[]">
                                           </div>
                                               <button class="btn btn-danger btn-sm delete_section_plan"><i class="fa fa-trash"></i></button>
                                           </div>
                                           </div>
                                           <br><br>
                                           <div class="form-group pull-right">
                                               <button type="button" class="btn btn-primary show_first_section">Précédent</button>
                                               <button type="submit" class="btn btn-primary">Ajouter</button>
                                               <button type="button" class="btn btn-dark close-form-btn" data-dismiss="modal">Annuler</button>
                                           </div>
                                       </section>

                                    </form>

                            </div>
                        </div>
                    </div>
                </div>

        </div>
    </div>


    <!-- /page content -->
@endsection
@section('script')
    @include('dashboard.MoyenLivraisons.scripts.scripts')
    @stop