@extends('admin.layouts.master')
@section('page_title', __("dashboard.social-media"))
@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endsection
@section('content')
    @include('admin.social-media.partials.create-modal')
    @include('admin.social-media.partials.delete')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header w-100 d-flex justify-content-between align-items-center">
                    <h4 class="card-title">
                        {{__("dashboard.social-media")}}
                    </h4>
                    <div class="d-flex align-items-center gap-2">
                        <button class="btn btn-info" data-bs-toggle='modal'
                                data-bs-target="#createSocialMediaModal">
                            <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="icon icon-tabler icons-tabler-outline icon-tabler-devices-plus"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 16.5v-7.5a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v3.5" /><path d="M18 8v-3a1 1 0 0 0 -1 -1h-13a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h8" /><path d="M16 9h2" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
                            <span class="mx-2">{{__("dashboard.add-new-social-media-platform")}}</span>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.social-media.update') }}" method="POST">
                        @csrf
                        @method('PUT')
                        @foreach($socials as $key => $social)
                            <div class="form-group row my-3">
                                <input class="form-control" type="hidden" value="{{$social->platform}}" name="social[{{$social->slug}}][platform]" />
                                <div class="col-9 align-self-center">
                                    <label class="form-label" for="{{$social->slug}}">
                                        <i class="{{$social->icon}} mx-1 fs-5"></i>
                                        {{$social->platform}}
                                    </label>
                                    <input type="url" class="form-control"
                                           name="social[{{$social->slug}}][url]"
                                           id="{{$social->slug}}"
                                           value="{{$social->url}}"/>
                                </div>
                                <div class="col-2 align-self-end mb-1">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" role="switch"
                                               name="social[{{$social->slug}}][is_visible]"
                                               id="is_visible_{{$social->slug}}" value="1"
                                            @checked($social->isVisible())/>
                                        <label class="form-check-label" for="is_visible_{{$social->slug}}">
                                            {{__("dashboard.Visible")}}
                                        </label>
                                    </div>
                                </div>
                                <div class="col-1 align-self-end mb-1">
                                    <a class='btn btn-red' data-social-slug='{{$social->slug}}' data-bs-toggle='modal' data-bs-target='#deleteSocialMediaModal' href='#'>
                                        <i class='fa fa-trash'></i>
                                    </a>
                                </div>
                            </div>
                            <hr class="bg-primary opacity-25">
                        @endforeach
                        @if($socials->count() !== 0)
                            <div class="form-group row">
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary">
                                        {{__("dashboard.edit")}}
                                    </button>
                                </div>
                            </div>
                        @endif

                    </form>


                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js" integrity="sha512-b+nQTCdtTBIRIbraqNEwsjB6UvL3UEMkXnhzd8awtCYh0Kcsjl9uEgwVFVbhoj3uu1DO1ZMacNvLoyJJiNfcvg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@endsection