@extends('layout.app')

@section('content')
    <div class="page-content">
        <div class="page-bar">
            <div class="page-title-breadcrumb">
                <div class=" pull-left">
                    <div class="page-title">Modifier les infos générales</div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="card card-box">
                    <div class="card-head">
                        <button id = "panel-button"
                                class = "mdl-button mdl-js-button mdl-button--icon pull-right"
                                data-upgraded = ",MaterialButton">
                            <i class = "material-icons">more_vert</i>
                        </button>
                    </div>
                    <div class="card-body row" id="bar-parent">
                        <div class="col">
                            <form action="{{ route('company.update', $data->custom_id) }}" method="POST" id="form_sample_1" class="form-horizontal" enctype="multipart/form-data">
                                @csrf
                                {{ method_field('put') }}
                                <div class="form-body">
                                    <div class="form-group row">
                                        <label class="control-label col-md-3">Logo
                                        </label>
                                        <div class="col-md-5">
                                            <div id="logo-container">
                                                <label for="logo-file-input" id="logo-label">
                                                    @if($data->logo)
                                                        <img id="logo-uploaded-image" class="uploaded-image" src="{{ asset(env('APP_URL').'storage/uploads/company/'.$data->logo) }}" alt="Image">
                                                    @else
                                                        <img id="logo-uploaded-image" class="uploaded-image" src="#" alt="Image" style="display: none;">
                                                    @endif
                                                </label>
                                                @if($data->logo)
                                                    <button type="button" class="btn btn-outline-danger btn-sm mt-2" id="delete-logo-btn">
                                                        <i class="fa fa-trash"></i> Supprimer le logo
                                                    </button>
                                                @endif
                                            </div>
                                            <input type="file" name="logo" data-required="1" class="form-control input-height mt-2" id="logo-file-input" accept="image/*">
                                            <input type="hidden" name="delete_logo" id="delete-logo-input" value="0">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="control-label col-md-3">Signature du Directeur Général
                                        </label>
                                        <div class="col-md-5">
                                            <div id="signature-container">
                                                <label for="signature-file-input" id="signature-label">
                                                    @if($data->signature)
                                                        <img id="signature-uploaded-image" class="uploaded-image" src="{{ asset(env('APP_URL').'storage/uploads/company/'.$data->signature) }}" alt="Image">
                                                    @else
                                                        <img id="signature-uploaded-image" class="uploaded-image" src="#" alt="Image" style="display: none;">
                                                    @endif
                                                </label>
                                                @if($data->signature)
                                                    <button type="button" class="btn btn-outline-danger btn-sm mt-2" id="delete-signature-btn">
                                                        <i class="fa fa-trash"></i> Supprimer la signature
                                                    </button>
                                                @endif
                                            </div>
                                            <input type="file" name="signature" data-required="1" class="form-control input-height mt-2" id="signature-file-input" accept="image/*">
                                            <input type="hidden" name="delete_signature" id="delete-signature-input" value="0">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="control-label col-md-3">Nom de la Clinique / Hôpital / Centre
                                            <span class="required"> * </span>
                                        </label>
                                        <div class="col-md-5">
                                            <input value="{{ $data->name }}" type="text" name="name" data-required="1" placeholder="" class="form-control input-height" required/> </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="control-label col-md-3">Docteur
                                            <span class="required"> * </span>
                                        </label>
                                        <div class="col-md-5">
                                            <input value="{{ $data->doctor }}" type="text" name="doctor" data-required="1" placeholder="" class="form-control input-height" required/> </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="control-label col-md-3">Diplomé à
                                            <i class="fa fa-info-circle text-secondary" data-toggle="tooltip" data-title="Cet élément se situe au coin supérieur gauche, juste en dessous de l'en-tête de la facture"></i>
                                        </label>
                                        <div class="col-md-5">
                                            <input value="{{ $data->diploma }}" type="text" name="diploma" data-required="1" placeholder="" class="form-control input-height" /> </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="control-label col-md-3">Montant ticket pour patient ({!! htmlentities(auth()->user()->company->currency_symbol, ENT_NOQUOTES, 'UTF-8') !!})
                                            <i class="fa fa-info-circle text-secondary" data-toggle="tooltip" data-title="Equivalent au prix de carnet"></i>
                                        </label>
                                        <div class="col-md-5">
                                            <input value="{{ $data->ticket_amount }}" type="text" name="ticket_amount" data-required="1" placeholder="" class="form-control input-height" /> </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="control-label col-md-3">TVA ({{ $data->tva_value }}%) sur vos factures ?

                                        </label>
                                        <div class="col-md-5">
                                            <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                                   for = "tva">
                                                <input type = "checkbox" id="tva"
                                                       class = "mdl-switch__input" name="tva" @if($data->tva) checked @endif>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="control-label col-md-3">Téléphone de la Clinique / Hôpital / Centre
                                            <span class="required"> * </span>
                                        </label>
                                        <div class="col-md-5">
                                            <style>
                                                .phone-input-container {
                                                    display: flex;
                                                    align-items: center;
                                                    gap: 10px;
                                                    width: 100%;
                                                    background: #fff;
                                                    border: 1px solid #ced4da;
                                                    border-radius: 50px;
                                                    padding: 2px 15px;
                                                    height: 38px;
                                                }

                                                .country-selector-wrapper {
                                                    display: flex;
                                                    align-items: center;
                                                }

                                                /* Styles pour Select2 avec drapeaux */
                                                .select2-container--default .select2-selection--single {
                                                    border: none !important;
                                                    background: transparent !important;
                                                    height: auto !important;
                                                }

                                                .select2-container--default .select2-selection--single .select2-selection__arrow {
                                                    display: none !important;
                                                }

                                                .select2-container--default .select2-selection--single .select2-selection__rendered {
                                                    padding-left: 0 !important;
                                                    color: #666 !important;
                                                    font-weight: 600;
                                                }

                                                .flag-icon-select {
                                                    width: 20px;
                                                    height: 14px;
                                                    margin-right: 8px;
                                                    display: inline-block;
                                                    vertical-align: middle;
                                                    border-radius: 2px;
                                                }

                                                .phone-number-input {
                                                    flex: 1;
                                                    border: none;
                                                    background: transparent;
                                                    color: #444;
                                                    font-size: 14px;
                                                    padding: 5px;
                                                    outline: none;
                                                    font-weight: 500;
                                                }
                                            </style>
                                            <link href="{{ asset('medical') }}/assets/plugins/select2/css/select2.css" rel="stylesheet" type="text/css" />
                                            <link href="{{ asset('medical') }}/assets/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />
                                            
                                            <div class="phone-input-container">
                                                <div class="country-selector-wrapper">
                                                    @php
                                                        $countryDialCodes = [
                                                            'FR' => '+33', 'BE' => '+32', 'CH' => '+41', 'CA' => '+1', 
                                                            'LU' => '+352', 'MC' => '+377', 'HT' => '+509', 'CI' => '+225', 
                                                            'SN' => '+221', 'CM' => '+237', 'ML' => '+223', 'GN' => '+224', 
                                                            'TD' => '+235', 'NE' => '+227', 'BJ' => '+229', 'TG' => '+228', 
                                                            'BF' => '+226', 'GA' => '+241', 'CG' => '+242', 'CD' => '+243', 
                                                            'CF' => '+236', 'MG' => '+261', 'RW' => '+250', 'BI' => '+257', 
                                                            'DJ' => '+253', 'KM' => '+269', 'SC' => '+248', 'VU' => '+678', 
                                                            'GQ' => '+240', 'MA' => '+212', 'DZ' => '+213', 'TN' => '+216', 
                                                            'LB' => '+961'
                                                        ];
                                                        $currentCountry = $data->country ?? 'FR';
                                                    @endphp
                                                    <select class="country-select" id="phone_country_code">
                                                        <option value="+33" data-code="FR" @if($currentCountry == 'FR') selected @endif>+33</option>
                                                        <option value="+32" data-code="BE" @if($currentCountry == 'BE') selected @endif>+32</option>
                                                        <option value="+41" data-code="CH" @if($currentCountry == 'CH') selected @endif>+41</option>
                                                        <option value="+1" data-code="CA" @if($currentCountry == 'CA') selected @endif>+1</option>
                                                        <option value="+352" data-code="LU" @if($currentCountry == 'LU') selected @endif>+352</option>
                                                        <option value="+377" data-code="MC" @if($currentCountry == 'MC') selected @endif>+377</option>
                                                        <option value="+509" data-code="HT" @if($currentCountry == 'HT') selected @endif>+509</option>
                                                        <option value="+225" data-code="CI" @if($currentCountry == 'CI') selected @endif>+225</option>
                                                        <option value="+221" data-code="SN" @if($currentCountry == 'SN') selected @endif>+221</option>
                                                        <option value="+237" data-code="CM" @if($currentCountry == 'CM') selected @endif>+237</option>
                                                        <option value="+223" data-code="ML" @if($currentCountry == 'ML') selected @endif>+223</option>
                                                        <option value="+224" data-code="GN" @if($currentCountry == 'GN') selected @endif>+224</option>
                                                        <option value="+235" data-code="TD" @if($currentCountry == 'TD') selected @endif>+235</option>
                                                        <option value="+227" data-code="NE" @if($currentCountry == 'NE') selected @endif>+227</option>
                                                        <option value="+229" data-code="BJ" @if($currentCountry == 'BJ') selected @endif>+229</option>
                                                        <option value="+228" data-code="TG" @if($currentCountry == 'TG') selected @endif>+228</option>
                                                        <option value="+226" data-code="BF" @if($currentCountry == 'BF') selected @endif>+226</option>
                                                        <option value="+241" data-code="GA" @if($currentCountry == 'GA') selected @endif>+241</option>
                                                        <option value="+242" data-code="CG" @if($currentCountry == 'CG') selected @endif>+242</option>
                                                        <option value="+243" data-code="CD" @if($currentCountry == 'CD') selected @endif>+243</option>
                                                        <option value="+236" data-code="CF" @if($currentCountry == 'CF') selected @endif>+236</option>
                                                        <option value="+261" data-code="MG" @if($currentCountry == 'MG') selected @endif>+261</option>
                                                        <option value="+250" data-code="RW" @if($currentCountry == 'RW') selected @endif>+250</option>
                                                        <option value="+257" data-code="BI" @if($currentCountry == 'BI') selected @endif>+257</option>
                                                        <option value="+253" data-code="DJ" @if($currentCountry == 'DJ') selected @endif>+253</option>
                                                        <option value="+269" data-code="KM" @if($currentCountry == 'KM') selected @endif>+269</option>
                                                        <option value="+248" data-code="SC" @if($currentCountry == 'SC') selected @endif>+248</option>
                                                        <option value="+678" data-code="VU" @if($currentCountry == 'VU') selected @endif>+678</option>
                                                        <option value="+240" data-code="GQ" @if($currentCountry == 'GQ') selected @endif>+240</option>
                                                        <option value="+212" data-code="MA" @if($currentCountry == 'MA') selected @endif>+212</option>
                                                        <option value="+213" data-code="DZ" @if($currentCountry == 'DZ') selected @endif>+213</option>
                                                        <option value="+216" data-code="TN" @if($currentCountry == 'TN') selected @endif>+216</option>
                                                        <option value="+961" data-code="LB" @if($currentCountry == 'LB') selected @endif>+961</option>
                                                    </select>
                                                </div>
                                                <input class="phone-number-input" type="tel" name="tel" value="{{ $data->tel }}" placeholder="00 00 00 00" required>
                                                <input type="hidden" name="country" id="hidden_country" value="{{ $currentCountry }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="control-label col-md-3">Ville
                                        </label>
                                        <div class="col-md-5">
                                            <input value="{{ $data->city }}" type="text" name="city" data-required="1" placeholder="Lomé" class="form-control input-height" /> </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="control-label col-md-3">En-tête
                                            <i class="fa fa-info-circle text-secondary" data-toggle="tooltip" data-title="Cet élément se situe au coin supérieur gauche de la facture. Ex: MEDECINE GENERALE | PEDIATRIE | ECHOGRAPHIE | RADIOGRAPHIE | ONCOLOGIE etc"></i>
                                        </label>
                                        <div class="col-md-5">
                                            <textarea name="header" id="basic-example" cols="30" rows="10" class="form-control ">{!! $data->header !!}</textarea>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="control-label col-md-3">Pied de page
                                            <i class="fa fa-info-circle text-secondary" data-toggle="tooltip" data-title="Cet élément se situe en bas (pied de page exactement) de la facture. Ex: Autorisation V52252, Loi 25 etc"></i>
                                        </label>
                                        <div class="col-md-5">
                                            <textarea name="footer" id="" cols="30" rows="10" class="form-control ">{!! $data->footer !!}</textarea>
                                        </div>
                                    </div>


                                    <div class="form-actions">
                                        <div class="row">
                                            <div class="offset-md-3 col-md-9">
                                                <button type="submit" class="btn btn-primary">Enregistrer</button>
                                                <a href="{{ url()->previous() }}" type="button" class="btn btn-outlined-default">Annuler</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="text-small text-muted pull-right">
                            <table>
                                <tr class="text-danger">
                                    <td><small>*</small></td>
                                    <td><small>Champs obligatoires</small></td>
                                </tr>
                                <tr class="text-secondary">
                                    <td><small><i class="fa fa-info-circle"></i></small></td>
                                    <td><small>Infos supplémentaires</small></td>
                                </tr>
                                <tr class="text-dark">
                                    <td><small><i class="fa fa-plus"></i></small></td>
                                    <td><small>Ajouter des éléments dans la liste</small></td>
                                </tr>
                                @if(auth()->user()->subGold())
                                <tr class="text-dark">
                                    <td><small><i class="fa fa-microphone"></i></small></td>
                                    <td><small>Transcrire audio en texte</small></td>
                                </tr>
                                @endif
                                @if(auth()->user()->subStandard())
                                <tr class="text-dark"><td><small><i class="fa fa-user-nurse text-dark"></i></small></td>
                                    <td><small>Générer grâce à
                                            <a href="#" class="text-primary text-decoration-underline" style="text-decoration: underline !important;" data-target="#docteurIAModal" data-toggle="modal" title="En savoir plus">Docteur IA</a>
                                            </small></td>
                                </tr>
                                @endif
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Gestion de la suppression du logo
            $('#delete-logo-btn').on('click', function() {
                if(confirm('Êtes-vous sûr de vouloir supprimer le logo ?')) {
                    $('#logo-uploaded-image').hide();
                    $('#delete-logo-btn').hide();
                    $('#delete-logo-input').val('1');
                    $('#logo-file-input').val('');
                }
            });

            // Gestion de la suppression de la signature
            $('#delete-signature-btn').on('click', function() {
                if(confirm('Êtes-vous sûr de vouloir supprimer la signature ?')) {
                    $('#signature-uploaded-image').hide();
                    $('#delete-signature-btn').hide();
                    $('#delete-signature-input').val('1');
                    $('#signature-file-input').val('');
                }
            });

            // Afficher l'image lorsqu'un nouveau fichier est sélectionné
            $('#logo-file-input').on('change', function(e) {
                if(this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#logo-uploaded-image').attr('src', e.target.result).show();
                        $('#delete-logo-input').val('0'); // Réinitialiser la suppression si un nouveau fichier est sélectionné
                    };
                    reader.readAsDataURL(this.files[0]);
                }
            });

            $('#signature-file-input').on('change', function(e) {
                if(this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#signature-uploaded-image').attr('src', e.target.result).show();
                        $('#delete-signature-input').val('0'); // Réinitialiser la suppression si un nouveau fichier est sélectionné
                    };
                    reader.readAsDataURL(this.files[0]);
                }
            });

            // --- LOGIQUE SELECT2 ET PAYS ---
            function formatState(state) {
                if (!state.id) { return state.text; }
                var code = $(state.element).data('code').toLowerCase();
                var $state = $(
                    '<span><img src="https://flagcdn.com/w20/' + code + '.png" class="flag-icon-select" /> ' + state.text + '</span>'
                );
                return $state;
            };

            if ($.fn.select2) {
                var select = $('#phone_country_code');
                var selectedVal = select.val(); // Sauvegarder la valeur sélectionnée par Blade
                
                var options = select.find('option');
                options.sort(function (a, b) {
                    return a.text.localeCompare(b.text);
                });
                
                select.empty().append(options);
                select.val(selectedVal); // Restaurer la valeur AVANT initialisation Select2

                select.select2({
                    templateResult: formatState,
                    templateSelection: formatState,
                    dropdownAutoWidth: true,
                    width: 'auto'
                });

                select.on('change', function() {
                    var code = $(this).find(':selected').data('code');
                    $('#hidden_country').val(code);
                });
            }
        });
    </script>
    <script src="{{ asset('medical') }}/assets/plugins/select2/js/select2.js"></script>
@endpush