@extends('frontLayout.frontlayout')
@section('content')

<section class="creator_wrap">
	<div class="creater_inner">
		@include('creatorDashboard.sidebar')
		<div class="right_side_wrap card-cover-image">
			<div class="head-main">
                <div class="head-img prof_image_sidebar">
                    @if($user->cover_image && public_path(url($user->cover_image)))
                    @include('frontend.partials.fileRender', ['file' => $user->cover_image, 'size' => "large"])
                    @else
                    <img src="{{url('assets/frontend/images/Layer-5.jpg')}}">
                    @endif
                    <div class="edit">
                        <a href="javascript:;" onclick="$(this).next().click()"><span><i class="fal fa-pen"></i></span></a>
                            <input type="file" style="display:none" name="" id="cover_img" data-url="{{route('creator.uplodeCoverPicture')}}" data-id="{{$user->id}}">
                    </div>
                </div>
                <div class="head-vre card-profile-image">
                    <div class="head-user-img prof_image_sidebar">
                        @include('frontend.partials.fileRender', ['file' => $user->image, 'size' => "medium"])
                        <div class="edit">
                            <a href="javascript:;" onclick="$(this).next().click()"><span><i class="fal fa-pen"></i></span></a>
                            <input type="file" style="display:none" name="" id="profile_img" data-url="{{route('creator.uplodeProfilePicture')}}" data-id="{{$user->id}}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-tabnt">
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <button class="nav-link active" id="nav-base-tab" data-bs-toggle="tab" data-bs-target="#nav-base" type="button" role="tab" aria-controls="nav-base" aria-selected="true">Basic</button>
                        <button class="nav-link" id="nav-advance-tab" data-bs-toggle="tab" data-bs-target="#nav-advance" type="button" role="tab" aria-controls="nav-advance" aria-selected="false">Advance</button>
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-base" role="tabpanel" aria-labelledby="nav-base-tab">
                        <div class="creator_dashboard">
                            <div class="container">
                                <div class="row">
                                    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                        <div class="my_detail">
                                            <div class="row">
                                                <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                                    <div class="detail_area">
                                                        @include('user.partials.flash_messages')
                                                        <div class="form-head-line">
                                                            <h6>
                                                                My details
                                                            </h6>
                                                        </div>
                                                        {{-- @include('user.partials.flash_messages') --}}
                                                        <form action="{{route('creator.profile')}}" method="post" id="creator-profile-update" autocomplete="off">
                                                            <!--!! CSRF FIELD !!-->
                                                            @csrf
                                                            <div class="row">
                                                                <div class="col-xxl-6 col-xl-6 col-lg-6  col-md-6 col-sm-6 col-12 ">
                                                                    <div class="form-group">
                                                                        <label for="first_name">First name</label>
                                                                        <input type="text" class="form-control" name="first_name" id="first_name" placeholder="First Name" value="{{ $user && $user->first_name ? $user->first_name : "" }}" required />
                                                                        @error('first_name')
                                                                            <small class="text-danger">{{ $message }}</small>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                                                    <div class="form-group">
                                                                        <label for="last_name">Last name</label>
                                                                        <input type="text" class="form-control" name="last_name" id="last_name" value="{{ $user && $user->last_name ? $user->last_name : "" }}" placeholder="Last Name"  required/>
                                                                        @error('last_name')
                                                                            <small class="text-danger">{{ $message }}</small>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                                <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                                                    <div class="form-group">
                                                                        <label for="page_name">Page Name</label>
                                                                        <input type="text" class="form-control" name="page_name" id="page_name" value="{{ $user && $user->page_name ? $user->page_name : "" }}" placeholder="page_name" required/>
                                                                        <div class="loader-actions">
                                                                        </div>
                                                                        @error('page_name')
                                                                            <small class="text-danger">{{ $message }}</small>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                                <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                                                    <div class="form-group">
                                                                        <label for="username">Username</label>
                                                                        <input type="text" class="form-control creator_username" name="username" id="username" value="{{ $user && $user->username ? $user->username : "" }}" placeholder="Username" required/>
                                                                        <div class="loader-actions">
                                                                        </div>
                                                                        @error('username')
                                                                            <small class="text-danger">{{ $message }}</small>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                                <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
                                                                    <div class="form-group">
                                                                        <label for="">Email</label>
                                                                        <input type="text" class="form-control" name="email" id="email" value="{{ $user && $user->email ? $user->email : "" }}" placeholder="Email" required>
                                                                    </div>
                                                                    @error('email')
                                                                        <small class="text-danger">{{ $message }}</small>
                                                                    @enderror
                                                                </div>
                                                                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                                                    <div class="form-group">
                                                                        <label for="">Contact number</label>
                                                                        <input type="text" class="form-control number" name="phonenumber" id="phonenumber" value="{{ $user && $user->phonenumber ? $user->phonenumber : "" }}" placeholder="Contact Number" required>
                                                                    </div>
                                                                    @error('phonenumber')
                                                                        <small class="text-danger">{{ $message }}</small>
                                                                    @enderror
                                                                </div>
                                                                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                                                    <div class="form-group">
                                                                        <label for="">Address</label>
                                                                        <input type="text" class="form-control" name="address" id="address" value="{{ $user && $user->address ? $user->address : "" }}" placeholder="Address">
                                                                    </div>
                                                                    @error('address')
                                                                        <small class="text-danger">{{ $message }}</small>
                                                                    @enderror
                                                                </div>
                                                                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                                                    <div class="form-group">
                                                                        <label for="">Pin code </label>
                                                                        <input type="text" class="form-control number" name="zipcode" id="zipcode" value="{{ $user && $user->zipcode ? $user->zipcode : "" }}" placeholder="Pin Code" required>
                                                                        @error('zipcode')
                                                                            <small class="text-danger">{{ $message }}</small>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                                                    <div class="form-group">
                                                                        <label for="">Select Your Category</label>
                                                                        <select id="inputcategory" class="form-select" name="category_id" required>
                                                                        <option disabled selected value="">Select Category</option>
                                                                                                                                            </select>
                                                                    @error('category_id')
                                                                        <small class="text-danger">{{ $message }}</small>
                                                                    @enderror
                                                                    </div>
                                                                </div>
                                                                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                                                    <div class="form-group">
                                                                        <label for="inputgender">Gender</label>
                                                                        <select id="inputgender" name="gender" class="form-select" required>
                                                                            <option value="">Select</option>
                                                                            <option value="male" {{ $user && $user->gender == 'male' ? 'selected' : "" }} >Male</option>
                                                                            <option value="female" {{ $user && $user->gender == 'female' ? 'selected' : "" }} >Female</option>
                                                                        </select>
                                                                        @error('gender')
                                                                            <small class="text-danger">{{ $message }}</small>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                                                                    <div class="form-group">
                                                                        <label for="">Date of birth <span class="text-danger"> *</span></label>
                                                                        <div class="input-group" id="start_date_box">
                                                                            <input type="text" class="form-control" name="dob" id="start_date" value="{{ $user && $user->dob ? date('d/m/Y', strtotime($user->dob)) : "" }}" placeholder="Enter DOB" onkeyup="
                                                                            var v = this.value;
                                                                            if (v.match(/^\d{2}$/) !== null) {
                                                                                this.value = v + '/';
                                                                            } else if (v.match(/^\d{2}\/\d{2}$/) !== null) {
                                                                                this.value = v + '/';
                                                                            }" maxlength="10" autocomplete="off" required>
                                                                            <div class="icon">
                                                                                <i class="fal fa-calendar-alt"></i>
                                                                            </div>
                                                                            @error('dob')
                                                                                <small class="text-danger">{{ $message }}</small>
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                                                    <div class="bte float-end">
                                                                        <button type="submit" class="btn btn-primary">Save changes</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                        <div class="row">
                                                            <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                                                <div class="add-account">
                                                                    @if(!$bank)
                                                                    <div class="left">
                                                                        <h5>
                                                                        Add your bank account
                                                                        </h5>
                                                                    </div>
                                                                    <div class="right">
                                                                        <div class="bte">
                                                                            <a href="javascript" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add-bank-account">Add account</a>
                                                                        </div>
                                                                    </div>
                                                                    @else
                                                                    <div class="bank-details">
                                                                        <div class="bank-details-block d-block">
                                                                            <div class="under-met">
                                                                                <p>
                                                                                    Bank Account Details
                                                                                </p>
                                                                                <div class="left">
                                                                                    <div class="deatil">
                                                                                        <p>Name: <span>{{$bank->name}}</span></p>
                                                                                        <p>Account: <span>{{$bank->account}}</span></p>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="right">
                                                                                    <div class="deatil">
                                                                                        <p>IFSC Code: <span>{{$bank->ifsc_code}}</span></p>
                                                                                        <p>Phone Number: <span>{{$bank->phoneno}}</span></p>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="eft editRecord">
                                                                                    <a href="javascript:;" data-url="{{route('creator.get.bank',[ 'id' => $bank->id ])}}" data-modal="edit-bank-account" data-form="edit-bank">
                                                                                        <i class="fal fa-pen"></i>
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @include('creatorDashboard.home.about')
                                                        {{-- @include('creatorDashboard.home.socials') --}}
                                                        @include('creatorDashboard.home.changePassword')
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-advance" role="tabpanel" aria-labelledby="nav-advance-tab">
                        <div class="creator_dashboard">
                            <div class="container">
                                <div class="row">
                                    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                        <div class="my_detail">
                                            <div class="row">
                                                <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                                    <div class="detail_area">
                                                       @include('user.partials.flash_messages')
                                                       @include('creatorDashboard.home.advance')
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include('frontend.partials.dashboardFooter')
        </div>
    </div>
</section>
@include('creatorDashboard.home.bank')
@endsection