@php

    // $structures = 
    $sifaris_list=[
        array(
            'sifaris_section_title'=>'निबेदन',
            'button_boxs'=> $structures->map(function($value,$key){
                return [
                      'href' => "structure/".strtolower( $value->id)."/edit",
                      'icon' => $value->icon,
                      'title' => $value->nep_name,
            ];
            })->toArray(),
            'button_boxs_old'=>array(
                ['href'=>'municipality-profile/hospital','icon'=>'icons/sifaris_icons/adhibasi_pramanit_icon.png','title'=>'hospital'],
                ['href'=>'briddha-bhatta.index','icon'=>'icons/sifaris_icons/bridha_bhatta_icon.png','title'=>'electricity '],
                ['href'=>'bipanna-nagarik.index','icon'=>'icons/sifaris_icons/bippanna_nagarik_icon.png','title'=>'school'],
            )
        ),
    ]
@endphp
{{-- {{
    dd($sifaris_list);
}} --}}
@extends('layouts.main')

@section('title')
डिजिटल पालिका | संरचना
@endsection

@section('custom-css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
    <style>

        .sifaris-section
        {
            margin-top: 10px;
        }
        .vertical-center {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 30px;

        }




        .slide_btn i{
            margin-top: 10px;
            font-size: 30px;

        }

        .slide_btn i:hover{

            color: #00a2e8;

        }

        .horizontal-scrollable {
            display: flex;
            overflow-x: scroll;
            scrollbar-width:none;
        }

        .horizontal-scrollable::-webkit-scrollbar {
            height: 0px;
        }

        .horizontal-scrollable::-webkit-scrollbar-thumb {
            background-color: blue;
        }

        .horizontal-scrollable::-webkit-scrollbar-track-piece:end {
            margin-right: 50px;
        }

        .horizontal-scrollable::-webkit-scrollbar-track-piece:start {
            margin-left: 50px;
        }
    </style>
@endsection

@section('content')

{{-- created box --}}
<div class="row">
    <div class="col-md-9">
        <div class="card">

            <div class="card-header">
                    <a href="{{route('home')}}" style="float: left;"><i class="fas fa-arrow-left arrow"></i></a>
                    <div class="d-flex justify-content-center">
                        <div class="">
                            <p class="card-title"> संरचना</p>
                        </div>
                    </div>

            </div>
            <div class="card-body">
                {{-- <div class="row" style="border-bottom: black 2px solid; padding-bottom: 10px; margin-top: -20px">
                    <div class="form-group col-sm-12 col-lg-12"  style="text-align: center">
                        <label for="first_name" class="form-label"><b>सिफारिस शीर्षकहरु</b></label>
                        <select name="dropdown_section_title" id="dropdown_section_title" class="form-control">
                            <option></option>
                            @foreach($sifaris_list as $key=>$sifaris)
                                <option value="{{$key}}"><b>{{$sifaris['sifaris_section_title']}}</b></option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group col-sm-12 col-lg-12" style="text-align: center">
                        <label for="first_name" class="form-label"><b>सिफारिसहरु</b></label>
                        <select name="dropdown_sifaris_title" id="dropdown_sifaris_title" class="form-control">
                            <option></option>
                            @foreach($sifaris_list as $key=>$sifaris)
                                @foreach($sifaris['button_boxs'] as $btn_key=>$button_box)
                                    <option value="{{$key}}" data-btn_id="{{$key}}{{$btn_key}}"><b>{{$button_box['title']}}</b></option>
                                @endforeach
                            @endforeach
                        </select>
                    </div>
                </div> --}}

                <div class="">
                    {{-- <button type="button" class="btn btn-primary ml-3">add</button> --}}
                    <button class="btn btn-primary mb-3"  data-bs-toggle="modal" data-bs-target="#addModal">
                        <i class='fas fa-plus-square'></i> नयाँ थप्नुहोस्
                    </button>
                </div>

                <div id="sifaris_search_div">

                </div>

                @foreach($sifaris_list as $key=>$sifaris)
                    <div id="sifaris_section{{$key}}">
                        <div class="row sifaris-section" >
                            <div class="d-flex justify-content-between">
                                {{-- <div class="sifaris-title">
                                    <h3><b>{{$sifaris['sifaris_section_title']}}</b></h3>
                                </div> --}}
                                {{-- <div class="row">
                                    <div class="col-6 slide_btn" data-container_id="boxs{{$key}}" data-btn_type="left" >
                                        <i class="fas sifaris-fa-icon fa-angle-double-left" style=""></i>
                                    </div>

                                    <div class="col-6 slide_btn" data-container_id="boxs{{$key}}" data-btn_type="right" >
                                        <i class="fas sifaris-fa-icon fa-angle-double-right"></i>
                                    </div>
                                </div> --}}

                            </div>

                            <div class="" id="" style="overflow-x:hidden">
                                <div class="row">
                                    @foreach($sifaris['button_boxs'] as $btn_key=>$button_box)
                                            {{-- <a href="@if(!$button_box['href']==''){{route($button_box['href'])}}@endif"> --}}
                                            <div class="col-md-3">
                                                <a href="{{$button_box['href']}}" class="">
                                                    <div class="button_box  m-0 mb-4 " style="width: initial">
                                                        <img src="{{$button_box['icon']}}" alt=""><span class="sub_box_title_address">{{$button_box['title']}}</span>
                                                    </div>
                                                </a>
                                            </div>
                                    @endforeach
                                </div>
                            </div>

                        </div>
                    </div>

                @endforeach
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card btn-card">
            <div class="card-header">
                quick list
            </div>
            <div class="card-body">

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addModalLongTitle">संरचना थप्नुहोस्</h5>
        </div>
        <div class="modal-body">
            <form id="add-msform">
                @csrf
                <div class="form-group col-12">
                    <label for="" class="form-label">
                        <b>संरचनाको नाम</b></label>
                    <input type="text" class="form-control" id="name" placeholder="">
                </div>
                <div class="form-group col-12">
                    <label for="" class="form-label">
                        <b>संरचनाको नाम ( नेपालीमा )</b></label>
                    <input type="text" class="form-control" id="nep_name" placeholder="">
                </div>
                <div class="form-group col-12">
                    <label for="" class="form-label">
                        <b>choose icon</b></label>
                    <input type="file" class="form-control" id="icon" placeholder="">
                </div>
                <div class="modalerror">
                    <ul class="modalerrors"></ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn_palika bg-danger" data-bs-dismiss="modal">रद्ध गर्नुहोस</button>
                    <button type="submit" class="btn_palika">सिर्जना गर्नुहोस्</button>
                </div>
            </form>
        </div>
      </div>
    </div>
</div>
@endsection


@section('custom-script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
    
    <script>

        
    function clearErrors()
    {
        $('.modalerrors').html('');
        $('.modalerror').removeClass('alert alert-danger');
    }

        $('#add-msform').on('submit',(function(e) {
        e.preventDefault();
        clearErrors();
        var name = $('#name').val();
        var nep_name = $('#nep_name').val();
        var data = {
            name: name,
            nep_name: name,
            _token: "{{ csrf_token() }}",
        }

        $.ajax({
            type: "post",
            url: "{{ route('structure.store') }}" ,
            data: data,
            success: function(response) {
                if (response.status == 200) {

                    $('#addModal').modal('hide')
                    Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: response.message,
                        showConfirmButton: false,
                        timer: 1500
                    })
                } else {
                    if (response.status == 400) {
                        $('.modalerror').addClass('alert alert-danger')
                        console.log(response.errors);
                        $('.modalerrors').html('');
                        $.each(response.errors, function(key, error) {
                            $('.modalerrors').append('<li>' + error + '</li>');
                        });
                    }
                    Swal.fire({
                        position: 'center',
                        icon: 'error',
                        title: 'Oops...',
                        text: response.message,
                        showConfirmButton: false,
                        timer: 1500
                    })
                }
            }
        });
    }));
    </script>
@endsection