@component('components.master')
@slot('body')
@verbatim
<div class="row layout-spacing " id="app">

    <!-- Content -->
    <div class="col-xl-5 col-lg-12 col-md-12 col-sm-12 layout-top-spacing">
        <div class="user-profile">
            <div class="widget-content widget-content-area p-2">
                <div class="d-flex justify-content-between">
                    <h3 class="">Perfil</h3>

                </div>
                <div class="text-center user-info">
                    <template v-if="model.hasOwnProperty('img')">
                        <img :src="model.img" alt="avatar" style="width: 180px;">
                    </template>
                    <p class="">{{model.persona.nombre}}</p>
                </div>
                <div class="user-info-list">

                    <div class="">
                        <ul class="contacts-block list-unstyled">

                            <li class="contacts-block__item">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin me-3"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>{{model.persona.direccion}}
                            </li>
                            <li class="contacts-block__item">
                                <a href="mailto:example@mail.com"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail me-3"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>{{model.email}}</a>
                            </li>
                            <li class="contacts-block__item">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone me-3"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg> {{model.persona.telefono}}
                            </li>
                        </ul>

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

    <div class="col-xl-7 col-lg-12 col-md-12 col-sm-12 layout-top-spacing">

        <div class="usr-tasks ">
            <div class="widget-content widget-content-area p-3">
                <h3 class="">Sucursales Disponibles</h3>
                <div class="table-responsive">
                    <table class="table table-borderes" style="width:100%" >
                        <thead>
                            <tr>

                                <th class=" text-center"> N° </th>
                                <th class="text-center">Nombre</th>
                                <th class="text-center">Imagen</th>
                                <th class="text-center">Direccion</th>


                                <th class="text-center">Opción</th>
                            </tr>
                        </thead>
                        <tbody>

                            <template v-for="(m,i) in model.sucursales">

                                <tr>

                                    <td class="text-center">{{i+1}}</td>
                                    <td class="text-center">
                                       {{m.sucursal.nombre}}
                                    </td>
                                    <td class="text-center">
                                        <a v-if="m.sucursal.hasOwnProperty('img')" class=" profile-img" href="javascript: void(0);">
                                            <img :src="m.sucursal.img" alt="product" style="width: 80px;">
                                        </a>
                                    </td>

                                    <td class="text-center">
                                        {{m.sucursal.direccion}}
                                     </td>



                                    <td class="text-center">
                                        <button  class="btn rounded-circle btn-outline-primary " @click="seleccionarSucursal(m)">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-in"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>
                                        </button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

</div>
@endverbatim
@endslot

@slot('script')
    <script>
      const { createApp, ref } = Vue

        createApp({

            data(){
                return{
                    message:'',
                    data:[],
                    model:{
                        persona:{},
                        sucursales:[]
                    }
                }
            },
            methods:{
                async getData(){
                    try{
                        let res = await axios.post("{{url('/auth/userAutenticable')}}")
                        return res.data
                    }catch(e){

                    }finally{

                    }
                },
                async seleccionarSucursal(item){
                    try {
                        let res = await axios.post("{{url('api/v1/seleccionSucursal')}}",item)
                       location.href = "{{url('/')}}"
                    } catch (error) {

                    }
                }
            },
            mounted(){
                this.$nextTick(async () => {
                    let self = this

                    try {
                        await Promise.all([self.getData()]).then((v) => {
                            this.model = v[0]
                        })


                    } catch (e) {

                    } finally {

                    }





                })

            }
        }).mount('#app')
    </script>
@endslot
@slot('style')
    <style>

        .btn-outline-primary svg{

            color: #4361ee !important;
        }
        .btn-outline-primary:hover svg{

            color: #fff !important;
        }
    </style>
@endslot
@endcomponent