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

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

@section("content")
    <style>
        /* Modern Tariff Guide Page - Sharp Edges Design */
        :root {
            --tarif-primary: #6d8f1a;
            --tarif-primary-dark: #5a7515;
            --tarif-danger: #dc2626;
            --tarif-warning: #f59e0b;
            --tarif-info: #3b82f6;
            --tarif-text: #1f2937;
            --tarif-text-muted: #6b7280;
            --tarif-border: #e5e7eb;
            --tarif-bg: #ffffff;
            --tarif-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; }

        .tarif-page-header { background: var(--tarif-bg); border-bottom: 1px solid var(--tarif-border); padding: 24px 0; margin-bottom: 24px; }
        .tarif-page-title { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 700; color: var(--tarif-text); margin: 0; }
        .tarif-service-info { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 16px; background: var(--tarif-bg-gray); border: 1px solid var(--tarif-border); }
        .tarif-service-logo { width: 50px; height: 50px; border: 1px solid var(--tarif-border); }
        .tarif-service-name { font-size: 16pt; font-weight: 600; color: var(--tarif-text); }
        .tarif-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; }
        .tarif-btn-primary { background: var(--tarif-primary); color: #ffffff; border-color: var(--tarif-primary); }
        .tarif-btn-primary:hover { background: var(--tarif-primary-dark); color: #ffffff; }
        .tarif-btn-default { background: #ffffff; color: var(--tarif-text); border-color: var(--tarif-border); }
        .tarif-btn-default:hover { background: var(--tarif-bg-gray); color: var(--tarif-text); }
        .tarif-table-container { background: var(--tarif-bg); border: 1px solid var(--tarif-border); overflow-x: auto; }
        .tarif-table { width: 100%; border-collapse: collapse; }
        .tarif-table thead { background: var(--tarif-bg-gray); }
        .tarif-table thead th { padding: 16px; text-align: left; font-weight: 700; font-size: 9pt; color: var(--tarif-text); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--tarif-border); white-space: nowrap; }
        .tarif-table tbody td { padding: 12px 16px; text-align: left; font-size: 9pt; color: var(--tarif-text); border-bottom: 1px solid var(--tarif-border); }
        .tarif-table tbody tr { transition: background 0.2s ease; }
        .tarif-table tbody tr:hover { background: var(--tarif-bg-gray); }
        .tarif-country-badge { display: inline-block; padding: 4px 8px; font-size: 8pt; background: var(--tarif-primary); color: #ffffff; margin: 2px; }
        .tarif-action-dropdown { position: relative; display: inline-block; }
        .tarif-action-btn { padding: 6px 12px; background: var(--tarif-bg-gray); color: var(--tarif-text); border: 1px solid var(--tarif-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; }
        .tarif-action-btn:hover { background: var(--tarif-primary); border-color: var(--tarif-primary); color: #ffffff; }
        .tarif-action-menu { position: absolute; top: 100%; left: 0; background: var(--tarif-bg); border: 1px solid var(--tarif-border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); min-width: 160px; z-index: 1000; display: none; margin-top: 4px; }
        .tarif-action-dropdown:hover .tarif-action-menu { display: block; }
        .tarif-action-menu-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 9pt; color: var(--tarif-text); text-decoration: none; transition: background 0.2s ease; border-bottom: 1px solid var(--tarif-border); white-space: nowrap; }
        .tarif-action-menu-item:last-child { border-bottom: none; }
        .tarif-action-menu-item:hover { background: var(--tarif-bg-gray); }
        .tarif-action-menu-item.view:hover { background: rgba(59, 130, 246, 0.1); color: var(--tarif-info); }
        .tarif-action-menu-item.edit:hover { background: rgba(245, 158, 11, 0.1); color: var(--tarif-warning); }
        .tarif-action-menu-item.delete:hover { background: rgba(220, 38, 38, 0.1); color: var(--tarif-danger); }
    </style>
    <!-- page content -->
    <div class="right_col" role="main">
        <div>
            <div class="clearfix"></div>
            <div class="container">
                <div class="tarif-page-header">
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <h1 class="tarif-page-title">
                                <i class="fa fa-file-invoice"></i>
                                <span>Grilles Tarifaires</span>
                            </h1>
                        </div>
                        <div class="col-xs-12 col-md-6 text-right" style="padding-top: 8px;">
                            <a href="{{route('livraisons.index')}}" class="tarif-btn tarif-btn-default">
                                <i class="fa fa-long-arrow-alt-left"></i>
                                <span>Retour</span>
                            </a>
                            <button data-target="#shippingCreateModal" data-toggle="modal" class="tarif-btn tarif-btn-primary">
                                <i class="fa fa-plus"></i>
                                <span>Ajouter un plan tarifaire</span>
                            </button>
                        </div>
                    </div>
                </div>
                <!-- form -->
                <div class="row">
                    <div class="col-12">
                        <div class="tarif-service-info">
                            <img src="{{$service->logo}}" alt="" class="tarif-service-logo">
                            <div class="tarif-service-name">{{$service->name}}</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 col-lg-12">
                        <div class="tarif-table-container">
                            <table class="tarif-table">
                                <thead>
                                <tr>
                                    <th>Pays</th>
                                    <th>Documents</th>
                                    <th style="text-align: right;">Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                @php $serviceapp=new App\ServiceShipping(); @endphp
                                @foreach($grilles as $grille)
                                    @php $countries= json_decode($grille->countries,true); @endphp
                                    <tr>
                                        <td>
                                        @for($i=0;$i<count($countries);$i++)
                                            <span class="tarif-country-badge">{{$countries[$i]}}</span>
                                        @endfor
                                        </td>
                                        <td>
                                            <a href="{{$grille->filename}}" target="_blank" style="color: var(--tarif-info); text-decoration: underline;">
                                                <i class="fa fa-file-pdf"></i> Grille tarifaire
                                            </a>
                                        </td>
                                        <td style="text-align: right;">
                                            <div class="tarif-action-dropdown">
                                                <button class="tarif-action-btn">
                                                    <span>Actions</span>
                                                    <i class="fa fa-chevron-down"></i>
                                                </button>
                                                <div class="tarif-action-menu">
                                                    <a href="" class="tarif-action-menu-item edit">
                                                        <i class="fa fa-toggle-on"></i>
                                                        <span>Changer le status</span>
                                                    </a>
                                                    <a href="" class="tarif-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 plan tarifaire pour le service de livraison {{$service->name}}</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.storePlanTarifaire')}}" enctype="multipart/form-data">
                                       @csrf
                                       <section id="second_section">
                                           <h2>Plan tarifaire par pays</h2>
                                           <input type="hidden" name="service_slug" value="{{$service->slug}}">
                                           <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="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